<template>
  <div class="echart" style="width: 100%; height: 100%">
    <div class="enlarge" @click="openDialog">
      <i class="el-icon-full-screen" />
    </div>
    <div ref="echarts9" style="width: 100%; height: 100%"></div>
    <el-dialog
      custom-class="echart-dialog"
      :visible.sync="Dialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :fullscreen="true"
    >
      <div class="echart-content">
        <el-row type="flex" style="height: 50%">
          <el-col :span="24">
            <div class="echart-enlarge" ref="echarts9Large"></div>
          </el-col>
        </el-row>
        <el-row type="flex" style="height: 48%; margin-top: 2%">
          <el-col :span="12">
            <div class="echart-enlarge" ref="echarts10Large"></div>
          </el-col>
          <el-col :span="12">
            <div class="echart-enlarge" ref="echarts11Large"></div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { handleDealFilter } from "@/utils/echarts/tool.js";
export default {
  name: "echarts9",
  props: ["rowHeight"],
  data() {
    return {
      style: {
        height: 0,
        xData: [],
        data: [],
        ydata: [],
        dqllclArr: [],
        dqsjclArr: [],
        zbllclArr: []
      },
      Dialog: false,
      echarts9: null,
      echarts9Large: null,
      echarts10: null,
      echarts10Data: [],
      echarts11: null,
      echarts11Data: [],
      option: {}
    };
  },
  created() {},
  computed: {
    dianBiaoGroupState() {
      return this.$store.state.dianBiaoGroupState;
    },
    echarts10State() {
      return this.$store.state.echarts10State;
    },
    echarts11State() {
      return this.$store.state.echarts11State;
    }
  },
  watch: {
    dianBiaoGroupState: {
      immediate: true,
      handler(val) {
        var data = val.data;
        let xarr = [];
        let ydata = [];
        data.forEach((item) => {
          xarr.push(item.gongxu);
          ydata.push(item.impEp);
        });
        this.xData = xarr;
        this.data = ydata;
        setTimeout(() => {
          this.$nextTick(() => {
            // 外层DOM一直需要刷新
            this.echarts9 = this.$echarts.init(this.$refs.echarts9);
            this.init("echarts9");
            if (this.Dialog) {
              this.echarts9Large = this.$echarts.init(this.$refs.echarts9Large);
              this.init("echarts9Large");
            }
          });
        });
      }
    },
    echarts10State: {
      immediate: true,
      handler(val) {
        let { data } = val;
        if (data.length > 0) {
          this.echarts10Data = handleDealFilter(data, "pz", "dh");
          this.$nextTick(() => {
            if (this.Dialog) {
              this.echarts10 = this.$echarts.init(this.$refs.echarts10Large);
              this.echarts10init();
            }
          });
        }
      }
    },
    echarts11State: {
      immediate: true,
      handler(val) {
        let { data } = val;
        if (data.length > 0) {
          this.echarts11Data = handleDealFilter(data, "pz", "dh");
          this.$nextTick(() => {
            if (this.Dialog) {
              this.echarts11 = this.$echarts.init(this.$refs.echarts11Large);
              this.echarts11init();
            }
          });
        }
      }
    }
  },
  mounted() {
    this.echarts9 = this.$echarts.init(this.$refs.echarts9);
    setTimeout(() => {
      this.echarts9.showLoading({
        color: "#ffffff",
        textColor: "#ffffff",
        maskColor: "rgba(255,255,255,0)"
      });
    }, 0);
  },
  methods: {
    init(dom) {
      var option = {
        tooltip: {
          trigger: "axis",
          padding: 10,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: dom == "echarts9" ? 12 : 16,
            color: "#fff",
            lineHeight: 25
          },
          axisPointer: {
            type: "shadow"
          },
          formatter: function (params) {
            let str = "<span>" + params[0].axisValueLabel + "</span></br>";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
                item.color +
                '"></span>' +
                item.seriesName +
                " : <span class='number'>" +
                item.value +
                "千瓦时</span></br>";
            });

            return str;
          }
        },
        dataZoom: [
          {
            show: true,
            yAxisIndex: 0,
            width: 12,
            height: "80%",
            showDataShadow: true,
            left: "95%"
          }
        ],
        color: ["#F04F36"],
        grid: {
          left: "3%",
          right: "8%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.xData,

          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: dom == "echarts9" ? 10 : 16,
              color: dom == "echarts9" ? "#316B84" : "#fff"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: dom == "echarts9" ? 10 : 16,
              color: dom == "echarts9" ? "#316B84" : "#fff"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#316B84",
              type: "dashed",
              width: 1
            }
          }
        },
        series: [
          {
            name: "电量消耗",
            type: "bar",
            barWidth: dom == "echarts9" ? 8 : 18, //柱图宽度
            data: this.data,
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: dom == "echarts9" ? 10 : 18,
                color: "#fff",
                fontFamily: "electronicFont"
              }
            }
          }
        ]
      };
      this.option = option;
      this[dom].setOption(option);
      this[dom].hideLoading();
      var _this = this;
      window.addEventListener("resize", function () {
        _this[dom].resize();
      });
    },
    echarts10init() {
      var option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 16,
            color: "#fff"
          }
        },
        legend: {
          orient: "vertical",
          right: 0,
          bottom: 0,
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 20,
          textStyle: {
            fontSize: 14,
            color: "#fff"
          }
        },
        color: ["#E7C4FF", "#C487F0", "#FD6B70", "#893A41", "#9F2A2F", "#AE0F1A", "#AE2B2F"],

        series: [
          {
            name: "",
            type: "pie",
            center: ["40%", "55%"],
            radius: ["55%", "60%"],
            label: {
              fontSize: 14,
              color: "#fff",
              formatter: "{per|{d}%}\n{b}",
              rich: {
                per: {
                  fontSize: 18,
                  fontFamily: "electronicFont"
                }
              }
            },

            labelLine: {
              show: true,
              length: 15,
              length2: 18
            },
            emphasis: {
              label: {
                show: true
              }
            },

            data: this.echarts10Data
          },
          {
            name: "",
            type: "pie",
            center: ["40%", "55%"],
            radius: ["30%", "45%"],
            animation: false,
            label: {
              show: true,
              color: "#fff",
              formatter: "细纱",
              position: "center",
              fontStyle: "bolder",
              fontSize:  26
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },

            data: this.echarts10Data
          }
        ]
      };
      this.echarts10.setOption(option);
      this.echarts10.hideLoading();
      var _this = this;
      window.addEventListener("resize", function () {
        _this.echarts10.resize();
      });
    },
    echarts11init() {
      var option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 16,
            color: "#fff"
          }
        },
        color: ["#0F21C4", "#3341DB", "#2D5971"],
        legend: {
          orient: "vertical",
          right: 0,
          bottom: 0,
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 20,
          textStyle: {
            fontSize: 14,
            color: "#fff"
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            center: ["50%", "55%"],
            radius: ["60%", "65%"],
            label: {
              fontSize: 14,
              color: "#fff",
              formatter: "{per|{d}%}\n{b}",
              rich: {
                per: {
                  fontSize: 18,
                  fontFamily: "electronicFont"
                }
              }
            },

            labelLine: {
              show: true,
              length: 15,
              length2: 18
            },
            emphasis: {
              label: {
                show: true
              }
            },

            data: this.echarts11Data
          },
          {
            name: "",
            type: "pie",
            center: ["50%", "55%"],
            radius: ["35%", "50%"],
            animation: false,
            label: {
              show: true,
              color: "#fff",
              formatter: "络筒",
              position: "center",
              fontStyle: "bolder",
              fontSize:  26
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },

            data: this.echarts11Data
          }
        ]
      };

      this.echarts11.setOption(option);
      this.echarts11.hideLoading();
      var _this = this;
      window.addEventListener("resize", function () {
        _this.echarts11.resize();
      });
    },
    openDialog() {
      this.Dialog = true;
      setTimeout(() => {
        this.$nextTick(() => {
          this.echarts9Large = this.$echarts.init(this.$refs.echarts9Large);
          this.init("echarts9Large");
          this.echarts10 = this.$echarts.init(this.$refs.echarts10Large);
          this.echarts10init();
          this.echarts11 = this.$echarts.init(this.$refs.echarts11Large);
          this.echarts11init();
          var _this = this;
          window.addEventListener("resize", function () {
            _this.echarts9Large.resize();
          });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
